<template>

    <div id="safe">
       <!-- <p><el-progress :text-inside="true" :stroke-width="24" text-inside="true" type="line" :format="format" :percentage="max" status="success"></el-progress></p> -->
        <!-- 查询条件 -->   
        <el-form :inline="true" :model="info" class="demo-form-inline">
            <el-form-item label="请选择商品I级分类:">
                <el-select v-model="info.search_firstKindId" placeholder="请选择" clearable>
                    <el-option v-for="x in aa1" :key="x.id" :label="x.kindName" :value="x.kindId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请选择商品II级分类:">
                <el-select v-model="info.search_secondKindId" placeholder="请选择" clearable>
                    <el-option v-for="x in bb1" :key="x.id" :label="x.kindName" :value="x.kindId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请选择商品III级分类:">
                <el-select v-model="info.search_thirdKindId" placeholder="请选择" clearable>
                    <el-option v-for="x in cc1" :key="x.id" :label="x.kindName" :value="x.kindId"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="请输入登记时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">

                        <el-date-picker type="datetime" v-model="info.search_registerTime1" placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-date-picker type="datetime" v-model="info.search_registerTime2" placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="search" round>查询按钮</el-button>
            </el-form-item>
        </el-form>
        <!--安全库存数据-->
        <el-table :data="arrList" style="width: 100%">
            <el-table-column prop="productId" label="产品编号" width="150">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="150">
            </el-table-column>
            <el-table-column prop="productClass" label="档次级别" width="150">
                <template slot-scope="scope">
                    {{ scope.row.productClass == "D001-1" ? "高档" : (scope.row.productClass == "D001-2" ? "中档" : "低档") }}
                </template>
            </el-table-column>
            <el-table-column prop="firstKindName" label="I级分类" width="150">
            </el-table-column>
            <el-table-column prop="secondKindName" label="II级分类" width="150">
            </el-table-column>
            <el-table-column prop="thirdKindName" label="III级分类" width="150">
            </el-table-column>
            <el-table-column prop="type" label="用途类型" width="150">
                <template slot-scope="scope">
                    {{ scope.row.type == "Y001-1" ? "商品" : "物料" }}
                </template>
            </el-table-column>
            <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)"
                        round>编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!---分页组件-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="pageSizeList" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>


        <!-- 库存 -->
        <el-dialog title="安全库存配置单" :visible.sync="dialogVisible" width="60%">

            <el-form :inline="true" :model="filebean" class="demo-form-inline">

                <el-form-item label="产品名称">
                    <el-input v-model="filebean.productName" placeholder="审批人"></el-input>
                </el-form-item>

                <el-form-item label="产品编号">
                    <el-input v-model="filebean.productId" placeholder="产品编号"></el-input>
                </el-form-item>

                <el-form-item label="库存报警下限数">
                    <el-input v-model="filebean.minAmount" placeholder="库存报警下限数"></el-input>
                </el-form-item>
                <el-form-item label="库存报警上限数">
                    <el-input v-model="filebean.maxAmount" placeholder="库存报警上限数"></el-input>
                </el-form-item>

                <el-form-item label="登记人">
                    <el-input v-model="filebean.register" placeholder="登记人"></el-input>
                </el-form-item>

                <!-- <el-form-item label="登记时间">
                    <el-date-picker v-model="filebean.registerTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item> -->
                 <el-form-item label="登记时间：">
                    <el-input v-model="regTime" class="demo-ruleForm" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="配置要求">
                    <el-input v-model="filebean.config" placeholder="配置要求"></el-input>
                </el-form-item>

                <el-form-item label="最大储存量">
                    <el-input v-model="filebean.maxCapacityAmount" placeholder="最大储存量"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>




    </div>
</template>

<script>
export default {
    data() {
        return {
            arrList: [],
            info: {
                search_firstKindId: '',
                search_secondKindId: '',
                search_thirdKindId: '',
                search_registerTime1: '',
                search_registerTime2: ''
            },
            filebean: {
                productName: '',
                productId: '',
                minAmount: '',
                maxAmount: '',
                register: '',
                registerTime:'',
                config: '',
                maxCapacityAmount: '',
            },
            aa1: [],
            bb1: [],
            cc1: [],
 max:0,
 regTime:"",

            // 当前页号
            currentPage: 1,
            // 当前页大小
            pageSize: 2,
            // 总记录数
            total: 0,
            // 页大小列表
            pageSizeList: [2, 5, 10, 20],
            dialogVisible: false,
        }
    },
    methods: {
        async list() {
            // 用es6的解构函数
            const { data: res } = await this.$http.post
                (`/design/designFileList1/${this.currentPage}/${this.pageSize}`, this.info)
            this.arrList = res.rows
            this.total = res.total
            
          let aaa=this.total/1
          if(aaa=="Infinity"){
           this.max=0
          }else{
            this.max=aaa
          }
          
        },
        // format(percentage) {
        // return  '页面数据的百分比:'+this.max ;
      //},
        async aa() {
            const { data: res } = await this.$http.post
                (`/DesignConflgFileKind/List?num=1`)
            this.aa1 = res
            const { data: res1 } = await this.$http.post
                (`/DesignConflgFileKind/List?num=2`)
            this.bb1 = res1
            const { data: res2 } = await this.$http.post
                (`/DesignConflgFileKind/List?num=3`)
            this.cc1 = res2
        },
        async handleEdit(index, row) {
            this.getdatatime()
            const { data: res } = await this.$http.post
                (`/design/productIdshow?productId=${row.productId}`)
            this.filebean = res

            this.dialogVisible = true
        },
        async add() {
             this.filebean.registerTime = this.regTime

            const data = await this.$http.post
                (`/StorageCell/add`, this.filebean)
            if (data.status == 200) {
                this.dialogVisible = false
                this.list()
            }
        },
        getdatatime() {
            var dt = new Date();
            var y = dt.getFullYear();
            var m = (dt.getMonth() + 1).toString().padStart(2, '0');
            var d = dt.getDate().toString().padStart(2, '0');
            var hh = dt.getHours().toString().padStart(2, '0');
            var mm = dt.getMinutes().toString().padStart(2, '0');
            var ss = dt.getSeconds().toString().padStart(2, '0');
            this.regTime = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },
    //     format(percentage) {
    //     return percentage === 100 ? '满' : `${percentage}%`;
    //   },
        // 页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.list()
        },
        // 页号改变
        handleCurrentChange(val) {
            this.currentPage = val
            // 重新查询
            this.list()
        },
        // 表单查询
        search() {
            // 查询
            this.currentPage = 1
            this.list()
        },


    },
    created() {
        this.list()
        this.aa()
    }
}
</script>

<style scoped></style>
